<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>作品详情 - 数智化赋能“微情境·微宣讲”红色实践活动</title>

  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" th:href="@{/templates/h5/assets/swiper-bundle.min.css}">
  <!-- 引入Tailwind CSS -->
  <script th:src="@{/templates/h5/assets/tailwindcss3.4.17.css}"></script>
  <!-- 引入Font Awesome -->
  <link th:href="@{/templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
  <script th:src="@{/templates/h5/assets/jquery.min.js}"></script>

  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }

      /* 内容区块样式 */
      .content-section {
        @apply bg-red-800 rounded-lg p-4 mb-4 border border-red-700;
      }

      /* 视频容器样式 */
      .video-container {
        @apply relative w-full bg-red-900 rounded-lg overflow-hidden mb-4;
        padding-top: 56.25%; /* 16:9比例 */
      }
      .video-placeholder {
        @apply absolute inset-0 flex items-center justify-center;
      }
      .video-player {
        @apply absolute inset-0 w-full h-full object-contain;
      }

      /* 评分标签样式 */
      .score-tag {
        @apply bg-red-900 px-2 py-1 rounded text-sm inline-flex items-center mr-2 mb-2;
      }
      .edit-btn {
        @apply ml-1 text-secondary text-xs cursor-pointer hover:opacity-80;
      }

      /* 互动按钮样式 */
      .action-btn {
        @apply flex flex-col items-center justify-center text-gray-200;
      }
      .action-btn.active {
        @apply text-secondary;
      }
      .action-icon {
        @apply text-lg mb-1;
      }
      .action-text {
        @apply text-xs;
      }

      /* 评论样式 */
      .comment-item {
        @apply border-b border-red-700 pb-3 mb-3 last:border-0 last:pb-0 last:mb-0;
      }
      .comment-avatar {
        @apply w-8 h-8 rounded-full bg-red-700 flex items-center justify-center text-xs mr-2;
      }

      /* 弹窗样式 */
      .modal-overlay {
        @apply fixed inset-0 bg-black/70 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300;
      }
      .modal-overlay.active {
        @apply opacity-100 pointer-events-auto;
      }
      .modal-container {
        @apply bg-red-800 border border-red-700 rounded-xl w-11/12 max-w-sm transform scale-95 transition-transform duration-300;
      }
      .modal-overlay.active .modal-container {
        @apply scale-100;
      }
      .modal-header {
        @apply border-b border-red-700 px-5 py-4 flex justify-between items-center;
      }
      .modal-body {
        @apply px-5 py-4;
      }
      .modal-footer {
        @apply border-t border-red-700 px-5 py-3 flex justify-end gap-2;
      }
      .score-input {
        @apply w-full bg-red-900 border border-red-700 rounded-lg px-3 py-2 text-white mt-2 focus:outline-none focus:border-secondary;
      }
      .modal-note {
        @apply text-xs text-gray-300 mt-2 italic;
      }
      .btn-primary {
        @apply bg-secondary text-red-900 px-4 py-1.5 rounded-lg text-sm font-medium hover:bg-secondary/90 transition-colors;
      }
      .btn-secondary {
        @apply bg-red-900 text-white px-4 py-1.5 rounded-lg text-sm font-medium hover:bg-red-700 transition-colors;
      }

      /* 加载状态 */
      .loading {
        @apply text-center py-8 text-gray-300;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
<div class="max-w-md mx-auto min-h-screen flex flex-col">
  <!-- 页面标题栏 -->
  <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-between items-center">
    <a href="#" class="text-white"><i class="fa fa-arrow-left"></i></a>
    <h1 class="text-xl font-bold">作品详情</h1>
    <a href="#" class="text-white"><i class="fa fa-share-alt"></i></a>
  </div>

  <!-- 页面内容区 -->
  <div class="flex-1 overflow-y-auto p-4 pb-24">
    <!-- 作品基本信息 -->
    <div class="content-section pb-3">
      <div class="flex justify-between items-start mb-3">
        <div>
          <span class="text-xs bg-red-900 px-2 py-0.5 rounded" th:text="|序号: #${compWork.id}|"></span>
          <h2 class="text-lg font-bold mt-1" th:text="${compWork.workName} ?: '未命名作品'"></h2>
        </div>
        <span class="bg-secondary text-red-900 text-xs px-2 py-1 rounded-full font-medium" th:text="|综合排名: 第${compWork.index ?: 'N'}名|"></span>
      </div>

      <!-- 作品封面 -->
      <div class="w-full rounded-lg overflow-hidden mb-3">
        <img
                th:src="${compWork.workCover ?: ('https://picsum.photos/800/450?random=' + compWork.id)}"
                th:alt="${compWork.workName}"
                class="w-full"
                loading="lazy"
        >
      </div>

      <!-- 评分信息 -->
      <div>
        <div class="flex flex-wrap">
          <div class="score-tag">
            <i class="fa fa-star text-secondary mr-1"></i>
            <span th:text="|综合得分: ${compWork.totalScore ?: 0}|"></span>
          </div>
          <div class="score-tag">
            <i class="fa fa-users text-secondary mr-1"></i>
            <span th:text="|学生评分: ${compWork.studentScore ?: 0}|"></span>
            <span class="edit-btn" data-type="student" id="editStudentScore"><i class="fa fa-pencil"></i></span>
          </div>
          <div class="score-tag">
            <i class="fa fa-graduation-cap text-secondary mr-1"></i>
            <span th:text="|教师评分: ${compWork.teacherScore ?: 0}|"></span>
            <span class="edit-btn" data-type="teacher" id="editTeacherScore"><i class="fa fa-pencil"></i></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 微情境视频 -->
    <div class="content-section">
      <h3 class="text-base font-medium mb-3 flex items-center">
        <i class="fa fa-film text-secondary mr-2"></i>微情境视频
      </h3>
      <div class="video-container">
        <div class="video-placeholder" id="situationVideoPlaceholder">
          <button class="w-14 h-14 rounded-full bg-secondary/90 text-red-900 flex items-center justify-center">
            <i class="fa fa-play text-xl"></i>
          </button>
        </div>
        <video
                th:if="${compWork.workVideo1}"
                class="video-player hidden"
                id="situationVideo"
                controls
                th:src="${compWork.workVideo1}"
        >
          您的浏览器不支持视频播放
        </video>
      </div>
      <p class="text-xs text-gray-300 text-center" th:text="|点击播放|"></p>
    </div>

    <!-- 微宣讲视频 -->
    <div class="content-section">
      <h3 class="text-base font-medium mb-3 flex items-center">
        <i class="fa fa-video-camera text-secondary mr-2"></i>微宣讲视频
      </h3>
      <div class="video-container">
        <div class="video-placeholder" id="speechVideoPlaceholder">
          <button class="w-14 h-14 rounded-full bg-secondary/90 text-red-900 flex items-center justify-center">
            <i class="fa fa-play text-xl"></i>
          </button>
        </div>
        <video
                th:if="${compWork.workSpeech}"
                class="video-player hidden"
                id="speechVideo"
                controls
                th:src="${compWork.workSpeech}"
        >
          您的浏览器不支持视频播放
        </video>
      </div>
      <p class="text-xs text-gray-300 text-center" th:text="|点击播放|"></p>
    </div>

    <!-- 作品数据与互动 -->
    <div class="content-section">
      <div class="flex justify-around py-2">
        <button class="action-btn" id="likeBtn">
          <i class="action-icon fa fa-thumbs-up"></i>
          <span class="action-text" th:text="|点赞 (${compWork.likeCount ?: 0})|"></span>
        </button>
        <button class="action-btn">
          <i class="action-icon fa fa-eye"></i>
          <span class="action-text" th:text="|浏览 (${(compWork.lookCount ?: 0)})|"></span>
        </button>
        <button class="action-btn" id="shareBtn">
          <i class="action-icon fa fa-share"></i>
          <span class="action-text" th:text="|转发 (${(compWork.shareCount ?: 0)})|"></span>
        </button>
      </div>
    </div>

    <!-- 在线评论 -->
    <div class="content-section">
      <h3 class="text-base font-medium mb-3 flex items-center">
        <i class="fa fa-comments text-secondary mr-2"></i>
        <span th:text="|在线评论 (${compWork.commentCount ?: 0})|"></span>
      </h3>

      <!-- 评论输入框 -->
      <div class="flex mb-4">
        <div class="comment-avatar">
          <i class="fa fa-user"></i>
        </div>
        <div class="flex-1">
          <input type="text" placeholder="发表你的看法..." class="w-full bg-red-900 border border-red-700 rounded-full px-3 py-2 text-sm focus:outline-none focus:border-secondary">
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comment-list">
        <!-- 这里可以通过Thymeleaf循环渲染真实评论 -->
        <div class="comment-item" th:each="comment : ${comments}">
          <div class="flex">
            <div class="comment-avatar">
              <span th:text="${#strings.substring(comment.userName, 0, 1)}"></span>
            </div>
            <div class="flex-1">
              <div class="flex justify-between">
                <div class="font-medium text-sm" th:text="${comment.userName}"></div>
                <div class="text-xs text-gray-400" th:text="${comment.createTime}"></div>
              </div>
              <p class="text-sm mt-1" th:text="${comment.content}"></p>
              <div class="flex mt-2 text-xs text-gray-400">
                <button class="flex items-center mr-3">
                  <i class="fa fa-thumbs-up mr-1"></i>
                  <span th:text="${comment.likeCount}"></span>
                </button>
                <button>回复</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 默认评论（当没有评论数据时显示） -->
        <div class="comment-item" th:if="${comments == null or comments.isEmpty()}">
          <div class="flex">
            <div class="comment-avatar">
              <span>张</span>
            </div>
            <div class="flex-1">
              <div class="flex justify-between">
                <div class="font-medium text-sm">张明</div>
                <div class="text-xs text-gray-400">2天前</div>
              </div>
              <p class="text-sm mt-1">作品非常感人，让我深刻理解了革命先辈的奋斗精神，值得我们学习和传承。</p>
              <div class="flex mt-2 text-xs text-gray-400">
                <button class="flex items-center mr-3"><i class="fa fa-thumbs-up mr-1"></i> 128</button>
                <button>回复</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多评论 -->
      <button class="w-full mt-3 py-2 text-sm border border-red-700 rounded-full hover:bg-red-900 transition-colors">
        加载更多评论
      </button>
    </div>
  </div>

  <!-- 底部固定导航栏 -->
  <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
    <a href="/h5/index" class="nav-item active flex-1">
      <i class="nav-icon fa fa-home"></i>
      <span class="nav-text">首页</span>
    </a>
    <a href="/h5/index_huodong" class="nav-item flex-1">
      <i class="nav-icon fa fa-calendar"></i>
      <span class="nav-text">活动</span>
    </a>
    <a href="/h5/index_paihangbang" class="nav-item flex-1">
      <i class="nav-icon fa fa-bar-chart"></i>
      <span class="nav-text">排行榜</span>
    </a>
    <a href="/h5/index_yonghu" class="nav-item flex-1">
      <i class="nav-icon fa fa-user"></i>
      <span class="nav-text">我的</span>
    </a>
  </div>
</div>

<!-- 评分编辑弹窗 -->
<div class="modal-overlay" id="scoreModal">
  <div class="modal-container">
    <div class="modal-header">
      <h3 class="font-bold text-base" id="modalTitle">编辑评分</h3>
      <button class="text-gray-300 hover:text-white" id="closeModal">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>请输入评分（1-100分）</p>
      <input type="number" min="1" max="100" step="0.1" class="score-input" id="scoreInput" th:value="${compWork.studentScore ?: 0}">
      <p class="modal-note" id="modalNote">
        提示：每个用户只能为同一作品评分一次
      </p>
    </div>
    <div class="modal-footer">
      <button class="btn-secondary" id="cancelBtn">取消</button>
      <button class="btn-primary" id="nextConfirmBtn">下一步</button>
    </div>
  </div>
</div>

<!-- 评分二次确认弹窗 -->
<div class="modal-overlay" id="scoreConfirmModal">
  <div class="modal-container">
    <div class="modal-header">
      <h3 class="font-bold text-base">确认评分</h3>
      <button class="text-gray-300 hover:text-white" id="closeScoreConfirmModal">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body text-center py-4">
      <i class="fa fa-exclamation-circle text-secondary text-2xl mb-3"></i>
      <p class="mb-2">您确定要提交这个评分吗？</p>
      <p class="text-sm">请确认无误后再提交，提交后无法修改</p>
      <p class="mt-3 font-medium" id="confirmScoreDisplay" th:text="|学生评分: ${compWork.studentScore ?: 0}|"></p>
    </div>
    <div class="modal-footer">
      <button class="btn-secondary" id="goBackBtn">返回修改</button>
      <button class="btn-primary" id="finalConfirmBtn">确认提交</button>
    </div>
  </div>
</div>

<!-- 验证码弹窗 -->
<div class="modal-overlay" id="verifyModal">
  <div class="modal-container">
    <div class="modal-header">
      <h3 class="font-bold text-base">验证身份</h3>
      <button class="text-gray-300 hover:text-white" id="closeVerifyModal">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p class="mb-2">请输入右侧验证码完成点赞</p>
      <div class="flex gap-3 items-center mb-2">
        <input type="text" placeholder="输入4位验证码" class="score-input w-1/2" id="verifyCodeInput" maxlength="4">
        <div class="w-1/2 h-10 bg-red-900 rounded-lg flex items-center justify-center text-secondary font-mono text-lg" id="verifyCodeBox">
          <!-- 验证码将通过JS生成 -->
        </div>
        <button class="text-xs text-gray-300 ml-1" id="refreshVerifyCode">
          <i class="fa fa-refresh"></i> 刷新
        </button>
      </div>
      <p class="modal-note text-red-300 hidden" id="verifyError">
        验证码错误，请重新输入
      </p>
    </div>
    <div class="modal-footer">
      <button class="btn-secondary" id="cancelVerifyBtn">取消</button>
      <button class="btn-primary" id="confirmVerifyBtn">确认点赞</button>
    </div>
  </div>
</div>

<!-- 转发提示弹窗 -->
<div class="modal-overlay" id="shareTipModal">
  <div class="modal-container">
    <div class="modal-header">
      <h3 class="font-bold text-base">转发作品</h3>
      <button class="text-gray-300 hover:text-white" id="closeShareTipModal">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body text-center">
      <i class="fa fa-wechat text-4xl text-green-400 mb-4"></i>
      <p class="mb-2">请通过微信右上角「三个点」转发</p>
      <p class="text-xs text-gray-300">
        1. 点击右上角「...」图标<br>
        2. 选择「转发」选项<br>
        3. 分享给好友或群聊
      </p>
    </div>
    <div class="modal-footer justify-center">
      <button class="btn-primary" id="confirmShareTipBtn">我知道了</button>
    </div>
  </div>
</div>

<!-- 重复点赞提示弹窗 -->
<div class="modal-overlay" id="repeatTipModal">
  <div class="modal-container">
    <div class="modal-header">
      <h3 class="font-bold text-base">温馨提示</h3>
      <button class="text-gray-300 hover:text-white" id="closeRepeatTipModal">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body text-center py-4">
      <i class="fa fa-info-circle text-secondary text-2xl mb-3"></i>
      <p>今天您已经点过赞了，请明天再来吧</p>
    </div>
    <div class="modal-footer justify-center">
      <button class="btn-primary" id="confirmRepeatTipBtn">我知道了</button>
    </div>
  </div>
</div>

<!-- 重复评分提示弹窗 -->
<div class="modal-overlay" id="repeatScoreModal">
  <div class="modal-container">
    <div class="modal-header">
      <h3 class="font-bold text-base">温馨提示</h3>
      <button class="text-gray-300 hover:text-white" id="closeRepeatScoreModal">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body text-center py-4">
      <i class="fa fa-info-circle text-secondary text-2xl mb-3"></i>
      <p>您已经评过分了，同一作品同一身份只能评分一次</p>
    </div>
    <div class="modal-footer justify-center">
      <button class="btn-primary" id="confirmRepeatScoreBtn">我知道了</button>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    // 全局变量 - 从Thymeleaf获取初始数据
    const workId = [[${compWork.id}]];
    let studentScore = [[${compWork.studentScore ?: 0}]];
    let teacherScore = [[${compWork.teacherScore ?: 0}]];
    let likeCount = [[${compWork.likeCount ?: 0}]];

    // 状态变量
    let currentScoreType = '';
    let currentScoreValue = 0;
    let studentScoreSubmitted = false;
    let teacherScoreSubmitted = false;
    let liked = false;
    let currentVerifyCode = '';

    // DOM元素
    const $scoreModal = $('#scoreModal');
    const $scoreConfirmModal = $('#scoreConfirmModal');
    const $verifyModal = $('#verifyModal');
    const $shareTipModal = $('#shareTipModal');
    const $repeatTipModal = $('#repeatTipModal');
    const $repeatScoreModal = $('#repeatScoreModal');

    // 导航栏切换效果
    $('.nav-item').click(function() {
      $('.nav-item').removeClass('active');
      $(this).addClass('active');
    });

    // 返回按钮事件
    $('.fa-arrow-left').parent().click(function(e) {
      e.preventDefault();
      window.history.back();
    });

    // 视频播放功能
    $('#situationVideoPlaceholder button').click(function() {
      $(this).parent().hide();
      $('#situationVideo').removeClass('hidden').get(0).play();
    });

    $('#speechVideoPlaceholder button').click(function() {
      $(this).parent().hide();
      $('#speechVideo').removeClass('hidden').get(0).play();
    });

    // 评分编辑按钮事件
    $('#editStudentScore').click(function() {
      openScoreModal('student', $(this));
    });

    $('#editTeacherScore').click(function() {
      openScoreModal('teacher', $(this));
    });

    // 打开评分弹窗
    function openScoreModal(type, element) {
      if ((type === 'student' && studentScoreSubmitted) || (type === 'teacher' && teacherScoreSubmitted)) {
        $repeatScoreModal.addClass('active');
        return;
      }

      currentScoreType = type;
      currentScoreValue = type === 'student' ? studentScore : teacherScore;

      // 更新弹窗内容
      $('#modalTitle').text(`${type === 'student' ? '学生' : '教师'}评分`);
      $('#modalNote').text(`提示：每个${type === 'student' ? '学生' : '教师'}只能为同一作品评分一次`);
      $('#scoreInput').val(currentScoreValue);

      // 显示弹窗
      $scoreModal.addClass('active');
      setTimeout(() => $('#scoreInput').focus(), 300);
    }

    // 关闭评分弹窗
    function closeScoreModal() {
      $scoreModal.removeClass('active');
    }

    // 评分输入变化
    $('#scoreInput').on('input', function() {
      currentScoreValue = parseFloat($(this).val()) || 0;
    });

    // 评分下一步按钮
    $('#nextConfirmBtn').click(function() {
      if (isNaN(currentScoreValue) || currentScoreValue < 1 || currentScoreValue > 100) {
        alert('请输入1-100之间的有效评分');
        return;
      }

      // 更新确认弹窗
      $('#confirmScoreDisplay').text(`${currentScoreType === 'student' ? '学生评分' : '教师评分'}: ${currentScoreValue.toFixed(1)}`);
      closeScoreModal();
      $scoreConfirmModal.addClass('active');
    });

    // 最终确认评分
    $('#finalConfirmBtn').click(function() {
      // 提交评分到后端
      $.ajax({
        url: '/h5/submitScore',
        type: 'POST',
        data: {
          workId: workId,
          scoreType: currentScoreType,
          score: currentScoreValue
        },
        success: function(response) {
          if (response.success) {
            // 更新本地数据
            if (currentScoreType === 'student') {
              studentScore = currentScoreValue;
              studentScoreSubmitted = true;
              $('#editStudentScore').parent().find('span:first').text(`学生评分: ${currentScoreValue.toFixed(1)}`);
            } else {
              teacherScore = currentScoreValue;
              teacherScoreSubmitted = true;
              $('#editTeacherScore').parent().find('span:first').text(`教师评分: ${currentScoreValue.toFixed(1)}`);
            }
            $scoreConfirmModal.removeClass('active');
          } else {
            alert(response.message || '评分提交失败');
          }
        },
        error: function() {
          alert('网络错误，评分提交失败');
        }
      });
    });

    // 点赞按钮事件
    $('#likeBtn').click(function() {
      if (liked) {
        $repeatTipModal.addClass('active');
      } else {
        openVerifyModal();
      }
    });

    // 转发按钮事件
    $('#shareBtn').click(function() {
      $shareTipModal.addClass('active');

      // 调用后端接口记录转发
      $.ajax({
        url: '/h5/recordShare',
        type: 'POST',
        data: { workId: workId },
        success: function() {}
      });
    });

    // 生成验证码
    function generateVerifyCode() {
      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let code = '';
      for (let i = 0; i < 4; i++) {
        code += chars[Math.floor(Math.random() * chars.length)];
      }
      currentVerifyCode = code;
      $('#verifyCodeBox').text(code);
      $('#verifyCodeInput').val('').removeClass('border-red-500');
      $('#verifyError').addClass('hidden');
    }

    // 打开验证码弹窗
    function openVerifyModal() {
      generateVerifyCode();
      $verifyModal.addClass('active');
      setTimeout(() => $('#verifyCodeInput').focus(), 300);
    }

    // 验证码确认
    $('#confirmVerifyBtn').click(function() {
      const inputCode = $('#verifyCodeInput').val().trim().toUpperCase();
      if (inputCode === currentVerifyCode) {
        // 验证成功，提交点赞
        $.ajax({
          url: '/h5/submitLike',
          type: 'POST',
          data: { workId: workId },
          success: function(response) {
            if (response.success) {
              likeCount++;
              liked = true;
              const formatCount = likeCount >= 1000 ? (likeCount/1000).toFixed(1)+'k' : likeCount;
              $('#likeBtn').addClass('active').find('.action-text').text(`点赞 (${formatCount})`);
              $verifyModal.removeClass('active');
            } else {
              alert(response.message || '点赞失败');
              if (response.repeated) {
                $verifyModal.removeClass('active');
                $repeatTipModal.addClass('active');
              }
            }
          },
          error: function() {
            alert('网络错误，点赞失败');
          }
        });
      } else {
        // 验证失败
        $('#verifyError').removeClass('hidden');
        $('#verifyCodeInput').addClass('border-red-500');
        generateVerifyCode();
      }
    });

    // 评论点赞功能
    $('.comment-item .fa-thumbs-up').parent().click(function() {
      const $this = $(this);
      const commentId = $this.data('comment-id');

      // 如果已经点赞，则取消点赞
      if ($this.hasClass('text-secondary')) {
        $.ajax({
          url: '/h5/cancelCommentLike',
          type: 'POST',
          data: { commentId: commentId },
          success: function() {
            let count = parseInt($this.text().trim().split(' ')[1]);
            count--;
            $this.removeClass('text-secondary').html(`<i class="fa fa-thumbs-up mr-1"></i> ${count}`);
          }
        });
      } else {
        // 否则添加点赞
        $.ajax({
          url: '/h5/likeComment',
          type: 'POST',
          data: { commentId: commentId },
          success: function() {
            let count = parseInt($this.text().trim().split(' ')[1]);
            count++;
            $this.addClass('text-secondary').html(`<i class="fa fa-thumbs-up mr-1"></i> ${count}`);
          }
        });
      }
    });

    // 弹窗关闭事件绑定
    $('#closeModal, #cancelBtn').click(closeScoreModal);
    $scoreModal.click(function(e) {
      if ($(e.target).is(this)) closeScoreModal();
    });

    $('#closeScoreConfirmModal').click(function() {
      $scoreConfirmModal.removeClass('active');
    });

    $('#goBackBtn').click(function() {
      $scoreConfirmModal.removeClass('active');
      $scoreModal.addClass('active');
    });

    $scoreConfirmModal.click(function(e) {
      if ($(e.target).is(this)) $scoreConfirmModal.removeClass('active');
    });

    $('#closeVerifyModal, #cancelVerifyBtn').click(function() {
      $verifyModal.removeClass('active');
    });

    $verifyModal.click(function(e) {
      if ($(e.target).is(this)) $verifyModal.removeClass('active');
    });

    $('#refreshVerifyCode').click(generateVerifyCode);

    $('#closeShareTipModal, #confirmShareTipBtn').click(function() {
      $shareTipModal.removeClass('active');
    });

    $shareTipModal.click(function(e) {
      if ($(e.target).is(this)) $shareTipModal.removeClass('active');
    });

    $('#closeRepeatTipModal, #confirmRepeatTipBtn').click(function() {
      $repeatTipModal.removeClass('active');
    });

    $repeatTipModal.click(function(e) {
      if ($(e.target).is(this)) $repeatTipModal.removeClass('active');
    });

    $('#closeRepeatScoreModal, #confirmRepeatScoreBtn').click(function() {
      $repeatScoreModal.removeClass('active');
    });

    $repeatScoreModal.click(function(e) {
      if ($(e.target).is(this)) $repeatScoreModal.removeClass('active');
    });
  });
</script>
</body>
</html>